<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js增删改查2</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .biger{
            width: 1110px;
        }
        li{
            list-style: none;
            float: left;
            width: 180px;
            border: 1px solid #000;
            text-align: center;
            height: 30px;
            line-height: 30px;
        }
        ul{
            overflow: hidden;
            width: 911px;
        }
       h2{
        text-align: center;
       }
    </style>
</head>
<body>
   <div class="biger">
    <h2>学生管理系统</h2>
    编号：<input type="text" id="userID"><br>
    姓名：<input type="text" id="username" maxlength="10">
    性别： 男：<input type="radio" name="sex" value="0" checked>
           女：<input type="radio" name="sex" value="1">
    手机号：<input type="text" id="userphone" maxlength="11">
    邮箱：  <input type="text" id="useremail">
    <button onclick="add()">提交</button>
   </div>

    <ul class="big">
        <li>姓名</li>
        <li>性别</li>
        <li>手机号</li>
        <li>邮箱</li>
        <li>操作</li>
    </ul>
    <div id="show">
       <!-- <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li><button>删除</button><button>修改</button></li>
       </ul> -->
       
    </div>
    <script>
        //创建数组对象
        var data=[{
            id:0,
            sex:0,
            name:"詹姆斯·哈登",
            phone:"18327614096",
            email:"1278703962@qq.com",
            delete:false,
        },
        {
            id:1,
            sex:1,
            name:"詹姆斯·哈登",
            phone:"18327614096",
            email:"1278703962@qq.com",
            delete:false,
        },
        {
            id:2,
            sex:0,
            name:"詹姆斯·哈登",
            phone:"18327614096",
            email:"1278703962@qq.com",
            delete:false,
        },{
            id:3,
            sex:1,
            name:"詹姆斯·哈登",
            phone:"18327614096",
            email:"1278703962@qq.com",
            delete:false,
        },{
            id:4,
            sex:0,
            name:"詹姆斯·哈登",
            phone:"18327614096",
            email:"1278703962@qq.com",
            delete:false,
        }]
        // var sex=document.getElementsByName("sex");
        //渲染
        function show(){
            //创建一个空的字符串
            var str="";

            //循环遍历数组
            for(var i = 0 ; i<data.length;i++){

                //判断0和1是男是女并渲染到页面;
               if(data[i].sex==0){
                data[i].sex="男";
               }else if(data[i].sex==1){
                data[i].sex="女";
               }

               //拼接字符串
                if(!data[i].delete){
                    data[i].id=i;
                    str += '<ul><li>'+data[i].name+'</li><li>'+data[i].sex+'</li><li>'+data[i].phone+'</li><li>'+data[i].email+'</li><li><button onclick="del('+data[i].id+')">删除</button><button onclick="updata('+i+')">修改</button></li></ul>';
                    // console.log(str);

                }
            }
            document.getElementById("show").innerHTML=str;
        }

        //删除
        function del(id){
            data.splice(id,1);
            show();
        }
        //增加
        // var sex=document.getElementById("sex");
        function add(){
            //判断用户 如果编号框里面有value值则执行修改，取反就执行添加
            if(!document.getElementById("userID").value){
                            //获取姓名框中的value值
            username=document.getElementById("username").value;          
            //获取性别
            // var sex=document.getElementById("sex");
            // console.log(sex);
            var sex=document.getElementsByName("sex");
            // console.log(sex);
            //遍历radio
            var gender ;
            for(var i = 0; i<sex.length;i++){
                
                if(sex[i].checked==true){
                    gender = sex[i].value;
                    // console.log(sex[i].value);
                }
            }
            //获取电话
            userphone=document.getElementById("userphone").value;
            //获取邮箱
            useremail=document.getElementById("useremail").value;
            //向数组对象中添加
                data.push({
                    name:username,
                    sex:gender,
                    phone:userphone,
                    email:useremail,
                })
            }else{
                //修改  拿到值之后把渲染页面值给赋值替换
                //获取data 用户选择的哪个编号value值 下标的name并赋值到姓名列表框中
                data[document.getElementById("userID").value].name=document.getElementById("username").value;
                var sex=document.getElementsByName("sex");
                var gender;
                for(var i = 0;i<sex.length;i++){
                    if(sex[i].checked==true){
                        gender=sex[i].value;
                    }
                }
                //获取性别
                data[document.getElementById("userID").value].sex=gender;
                // console.log(gender);
                data[document.getElementById("userID").value].phone=document.getElementById("userphone").value;
                data[document.getElementById("userID").value].email=document.getElementById("useremail").value;
            }
            show();
        }
        //修改
        function updata(i){
            // var userID=document.getElementById("userID");
            // userID.style.display="none";
            document.getElementById("userID").value=data[i].id;
            console.log(data[i].id);
            //获取姓名框里面的value值并赋值到数组
            document.getElementById("username").value=data[i].name;
            
            document.getElementById("userphone").value=data[i].phone;
            document.getElementById("useremail").value=data[i].email;

            //获取性别
            if(data[i].sex=="男"){
                //当数组里的sex等于男时返回第一个radio的checked为true
                document.getElementsByName("sex")[0].checked=true;
            }else{
                document.getElementsByName("sex")[1].checked=true;
            }
            // console.log(data[i].sex);
            show();
        }

        show();
    </script>
</body>
</html>